import {
  Box,
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  InputRightAddon,
  FormHelperText,
  RadioGroup,
  Radio,
  Select,
  Switch,
  FormLabel,
  Flex,
  Button,
  FormControl,
  Link,
  Text,
  Image,
  useToast,
  FormErrorMessage
} from '@chakra-ui/react';
import * as Yup from 'yup';
import { useFormik } from 'formik';

import JInput from './JInput';
import { register } from '../api/user';

import WechatIcon from '../assets/images/icon-wechat.png';
import QQIcon from '../assets/images/icon-qq.png';
import LockIcon from '../assets/images/icon-lock.png';
import UserIcon from '../assets/images/icon-user.png';
import EmailIcon from '../assets/images/icon-email.png';

export default function SignUp() {
  const toast = useToast();
  const formik = useFormik({
    initialValues: { username: '', password: '', email: ''},
    validationSchema: Yup.object({
      username: Yup.string()
        .max(15, '用户名的长度不能大于15')
        .required('请填写昵称'),
      password: Yup.string()
        .min(8, '密码的长度不能小于8')
        .required('请填写密码'),
      email: Yup.string().email('邮箱格式不正确').required('请填写邮箱')
    }),
    onSubmit: async values => {
      try {
        const { data } = await register({
          user: values
        });
        toast({
          title: "提示信息",
          description: "注册成功！",
          status: "success",
          duration: 9000,
          isClosable: true,
          position: 'top-left'
        });
      } catch (error) {
        toast({
          title: "提示信息",
          description: "注册失败！",
          status: "error",
          duration: 9000,
          isClosable: true,
          position: 'top-left'
        });
      }
      
    }
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <Stack spacing={0} border="1px solid #c8c8c8">
        <FormControl isRequired  isInvalid={formik.errors.username && formik.touched.username}>
          <InputGroup bg="#f7f7f7" borderBottom="1px solid #c8c8c8">
            <InputLeftAddon children={<Image src={UserIcon} w="18px" he="25px"/>} borderRadius="0" bg="inherit" h="50px" border="none" px="8px"/>
            <JInput  placeholder="你的昵称" {...formik.getFieldProps('username')}/>
          </InputGroup>
          <FormErrorMessage>{ formik.errors.username }</FormErrorMessage>
        </FormControl>
        <FormControl isRequired isInvalid={formik.errors.email && formik.touched.email}>
          <InputGroup bg="#f7f7f7" borderBottom="1px solid #c8c8c8">
            <InputLeftAddon children={<Image src={EmailIcon} w="18px" he="25px"/>} borderRadius="0" bg="inherit" h="50px" border="none" px="8px"/>
            <JInput  placeholder="邮箱" {...formik.getFieldProps('email')}/>
          </InputGroup>
          <FormErrorMessage>{ formik.errors.email }</FormErrorMessage>
        </FormControl>
        <FormControl isRequired isInvalid={formik.errors.password && formik.touched.password}>
          <InputGroup bg="#f7f7f7">
            <InputLeftAddon children={<Image src={LockIcon} w="18px" he="25px"/>} borderRadius="0" bg="inherit" h="50px" border="none" px="8px"/>
            <JInput  placeholder="密码" type="password" {...formik.getFieldProps('password')}/>
          </InputGroup>
          <FormErrorMessage>{ formik.errors.password }</FormErrorMessage>
        </FormControl>
      </Stack>
      <Button
        _hover={{ bgColor: '#42c02e' }}
        w="100%"
        bg="#42c02e"
        color="white"
        mt="20px"
        borderRadius="25px"
        type="submit"
      >
        注册
      </Button>
      <Text color="#969696" fontSize="12px" textAlign="center" mt="10px">
        点击 “注册” 即表示您同意并愿意遵守简书<br/>
        <Link color="#3194d0" href="https://www.jianshu.com/p/c44d171298ce" _hover={{textDecoration: "none"}}>用户协议</Link> 和
        <Link color="#3194d0" href="https://www.jianshu.com/p/2ov8x3" _hover={{textDecoration: "none"}}>隐私政策</Link> 。
      </Text>
      <Box mt="50px" textAlign="center">
        <Stack direction="row" alignItems="center" justifyContent="space-evenly" mb="10px">
          <Box w="60px" h="1px" bg="#b5b5b5"></Box>
          <Text 
            fontSize="12px" 
            color="#b5b5b5"
            as="h6"
            m="0"
          >社交账号登录</Text>
          <Box w="60px" h="1px" bg="#b5b5b5"></Box>
        </Stack>
        <Stack direction="row" justifyContent="space-evenly" px="25%">
          <Image src={WechatIcon} w="28px" h="28px" cursor="pointer"/>
          <Image src={QQIcon} w="28px" h="28px" cursor="pointer"/>
        </Stack>
      </Box>
    </form>
  )
}
